.container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
  align-items: center;
  align-self: stretch;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--spacing-10) var(--spacing-3);
  background-color: var(--global-background);
  border: var(--border-width-base) solid var(--global-border);
  border-radius: var(--border-radius-md);
}

.contentAndLink {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
  align-items: center;
}

.content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  align-items: center;
  justify-content: center;
}

.illustration {
  width: 200px;
  height: 100px;
}

.title {
  font-family: var(--main-font, Inter);
  font-size: var(--font-size-6, 1rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: var(--global-foreground, #fff);
}

.description {
  font-family: var(--main-font, Inter);
  font-size: var(--font-size-4, 0.8125rem);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  color: var(--global-mute-text, #bebfc1);
  text-align: center;
}

/* TODO: Ideally, we want to use the Button from @liam-hq/ui, but since the content is a link, we're implementing a custom version here. */
.createButton {
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-6);
  font-weight: 500;
  color: var(--button-foreground);
  text-decoration: none;
  background-color: var(--button-primary-background);
  border: var(--border-width-base) solid var(--button-primary-background);
  border-radius: var(--border-radius-base);
  transition: background-color var(--default-hover-animation-duration)
    var(--default-timing-function);
}

.createButton:hover {
  background-color: var(--button-primary-background-hover);
  border-color: var(--button-primary-background-hover);
}
